<template>
    <div>
     <!-- 大容器 -->
     <section class="container">
       <!-- 左容器 -->
       <section class="itemLeft">
         <Ip>
           <!-- 插入槽口 -->
           <template #main>
             <ItemOne/>
           </template>
           </Ip>
          <Ip>
           <!-- 插入槽口 -->
           <template #main>
             <ItemTwo/>
           </template>
           </Ip>
       </section>
       <!-- 右容器 -->
       <section class="itemRight">
         <Ip>
           <!-- 插入槽口 -->
           <template #main>
             <ItemThree/>
           </template>
           </Ip>
          <Ip>
           <!-- 插入槽口 -->
           <template #main>
             <ItemFour/>
           </template>
           </Ip>
       </section>
     </section>
    </div>
    </template>
    <script setup lang="ts">
    import Ip from "../../components/ItemPage.vue"
    // 左右4个小组件的引用
    import ItemOne from "../../components/ItemOne.vue"
    import ItemTwo from "../../components/ItemTwo.vue"
    import ItemThree from "../../components/ItemThree.vue"
    import ItemFour from "../../components/ItemFour.vue"
    </script>
    <style lang="scss">
    // 主体容器样式
    .container {
    // 这里就不需要设置使用rem了 使用rem那么页面就会根据html根结点大小改变而改变了
    width: 100%;
    margin: 0 auto;
    background-color: gray;
    display: flex;
    // 设置左中右的占比 但是不要忘了在父容器要设置flex
    .itemLeft,
    .itemRight {
     flex: 1;
    }
    }
    </style>